import  { useEffect, useState } from 'react';
import { Space, Table } from 'antd';
import type { TableProps } from 'antd';
import axios from '../../api/http'
import type { PopconfirmProps } from 'antd';
import { Button, message, Popconfirm } from 'antd';
import type { FormProps } from 'antd';
import { Form, Input } from 'antd';
import {  Modal } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import type { GetProps } from 'antd';
import { useNavigate } from 'react-router-dom';
function Index() {
  const nav=useNavigate()
  const [keyword,setKeyword]=useState('')
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }
  
  const columns: TableProps<DataType>['columns'] = [
    {
      title: '编码',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
      render: (text,record) => <a onClick={()=>nav(`/detail/${record.id}`)}>{text}</a>,
    },
    {
        title: '取件人',
        dataIndex: 'title',
        key: 'title',
       
      },
    {
        title: '创建时间',
        dataIndex: 'createdAt',
        key: 'createdAt',
      },
      {
        title: '修改时间',
        dataIndex: 'updatedAt',
        key: 'updatedAt',
      },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
           <Popconfirm
    title="Delete the task"
    description="Are you sure to delete this task?"
    onConfirm={()=>confirm(record.id)}
    onCancel={cancel}
    okText="Yes"
    cancelText="No"
  >

    <Button danger>删除</Button>

  </Popconfirm>
  <Button onClick={()=>edit(record)}>编辑</Button>
        </Space>
      ),
    },
  ];
  // 获取数据
  const [data,setData]=useState([])
  const getData=async()=>{
    const res=await axios.get(`/article/list`,{
      params:{
        keyword
      }
    })
    setData(res.data.rows)

  }
  useEffect(()=>{
    getData()
  },[keyword])
// 删除
const confirm: PopconfirmProps['onConfirm'] = (id) => {
  console.log(id);
  message.success('Click on Yes');
  const dd=data.filter((item)=>item.id!==id)
  setData(dd)
};

const cancel: PopconfirmProps['onCancel'] = (e) => {
  console.log(e);
  message.error('Click on No');
};
// 新增
const [isModalOpen, setIsModalOpen] = useState(false);
const [addForm]=Form.useForm()

const showModal = () => {
  setIsModalOpen(true);
  addForm.resetFields()
  setflag(true)
};

const handleOk = () => {
  setIsModalOpen(false);
};

const handleCancel = () => {
  setIsModalOpen(false);
};
type FieldType = {
  content?: string;
  title?: string;

};
const [flag,setflag]=useState(false)
const onFinish: FormProps<FieldType>['onFinish'] = async(values) => {
  if(flag){
    const res=await axios.post(`/article`,{
      ...values,
      tagList:["HTTP"],
    categoryList:["HTTP"],
    authorId:47529555
    }).then((res)=>{
      getData()
      setIsModalOpen(false);
    })
  }else{
    const ee=await axios.put(`/article/${id}`,{
      ...values,
      tagList:["HTTP"],
categoryList:["HTTP"],

    }).then((res)=>{
      getData()
      setIsModalOpen(false);
    })
  }

}

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
  console.log('Failed:', errorInfo);
};

// 新增按钮
const add=()=>{
  setIsModalOpen(false)
}
// 编辑
const [id,setid]=useState()
const edit=(record)=>{
  setid(record.id)
  setIsModalOpen(true)
  addForm.setFieldsValue(record)
  setflag(false)
}
// 搜索

type SearchProps = GetProps<typeof Input.Search>;

const { Search } = Input;

const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1677ff',
    }}
  />
);

const onSearch =(values:string)=>{
  setKeyword(values)
}
  return (
    <div>
      <Button type="primary" onClick={showModal}>
      新增
      </Button>
      <Modal
        title="Basic Modal"
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
       <Form
    name="basic"
    form={addForm}
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item<FieldType>
      label="内容"
      name="content"
     
    >
      <Input />
    </Form.Item>
    <Form.Item<FieldType>
      label="取件人"
      name="title"
     
    >
      <Input />
    </Form.Item>

   

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit" onClick={add}>
        完成
      </Button>
    </Form.Item>
  </Form>
      </Modal>
      <Search
      placeholder="input search text"
      allowClear
      enterButton="Search"
      size="large"
      onSearch={onSearch}
    />
     <Table<DataType> rowKey='id' columns={columns} dataSource={data} />
    </div>
  )
}

export default Index
